<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>检查项管理</title>
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!--<link rel="stylesheet" href="../../../static/plugins/elementui/index.css">-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../static/plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../../../static/css/orderset.css">
</head>
<body>
<div id="app">
    <el-button type="primary" icon="el-icon-edit" circle @click="dialogFormVisible2=true">新增检查项</el-button>
    <template>

        <el-table
                :data="tableData.list"
                height="500"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    label="编码"
                    prop="code" width="100">
            </el-table-column>
            <el-table-column
                    label="检查项目名称"
                    prop="name" width="100">
            </el-table-column>
            <el-table-column
                    label="性别"
                    prop="sex"
                    width="220">

                <template slot-scope="scope" width="180">
                    <label v-if="tableData.list[scope.$index].sex==0">男女适用</label>
                    <label v-if="tableData.list[scope.$index].sex==1">男</label>
                    <label v-if="tableData.list[scope.$index].sex==2">女</label>
                </template>
            </el-table-column>
            <el-table-column
                    label="适合年龄"
                    prop="age" width="150">
            </el-table-column>
            <el-table-column
                    label="价格"
                    prop="price" width="220">
            </el-table-column>
            <el-table-column
                    label="检查类型"
                    prop="type" width="150">
                <template slot-scope="scope" width="180">
                    <label v-if="tableData.list[scope.$index].type==1">检验</label>
                    <label v-if="tableData.list[scope.$index].type==2">检查</label>
                </template>
            </el-table-column>
            <el-table-column
                    label="注意事项"
                    prop="attention" width="220">
            </el-table-column>
            <el-table-column
                    label="备注"
                    prop="remark" width="180">
            </el-table-column>


            <el-table-column
                    fixed="right"
                    width="180"
                    label="操作">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="name"
                            size="mini"
                            placeholder="输入姓名查找" @input="showCheckItem(name)"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="dialogFormVisibleOpen(scope.row)">修改
                    </el-button>
                    <!--handleEdit(scope.$index, scope.row)-->

                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteSetMeal(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :current-page="tableData.pageNum"
            :page-size="tableData.pageSize"
            :total="tableData.total"
            @current-change="showCheckItem(name,$event)">
    </el-pagination>
    <p>当前为:{{tableData.pageNum}}页,总页数为:{{tableData.pages}},总条数为:{{tableData.total}}</p>


    <!--编辑-->
    <el-dialog title="检查项编辑" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="检查项编码" :label-width="formLabelWidth">
                <el-input :disabled="true" v-model="form.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检查项名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="form.sex" placeholder="请选择">
                    <el-option
                            label="男女合适"
                            value="0">
                    </el-option>
                    <el-option
                            label="男"
                            value="1">
                    </el-option>
                    <el-option
                            label="女"
                            value="2">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="适合年龄" :label-width="formLabelWidth">
                <el-input v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检查类型" :label-width="formLabelWidth">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option
                            label="检验"
                            value="1">
                    </el-option>
                    <el-option
                            label="检查"
                            value="2">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="注意事项" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="form.attention">
                </el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false">取 消</el-button>
            <el-button type="primary" @click="updateCheckItem(form)">确 定</el-button>
        </div>
    </el-dialog>


    <!--新增-->
    <el-dialog title="检查项新增" :visible.sync="dialogFormVisible2">
        <el-form :model="form2">
            <el-form-item label="检查项编码" :label-width="formLabelWidth">
                <el-input  v-model="form2.code" @blur="count(form2.code)" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检查项名称" :label-width="formLabelWidth">
                <el-input v-model="form2.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="form2.sex" placeholder="请选择">
                    <el-option
                            label="男女合适"
                            value="0">
                    </el-option>
                    <el-option
                            label="男"
                            value="1">
                    </el-option>
                    <el-option
                            label="女"
                            value="2">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="适合年龄" :label-width="formLabelWidth">
                <el-input v-model="form2.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="form2.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="检查类型" :label-width="formLabelWidth">
                <el-select v-model="form2.type" placeholder="请选择">
                    <el-option
                            label="检验"
                            value="1">
                    </el-option>
                    <el-option
                            label="检查"
                            value="2">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="注意事项" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="form2.attention">
                </el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="form2.remark" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2=false">取 消</el-button>
            <el-button type="primary" @click="addCheckItem(form2)">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="../../../static/js/axios-0.18.0.js"></script>
<script src="../../../static/js/vue.js"></script>
<!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../../../static/js/jquery.min.js"></script>
<script>

    var vue=new Vue({
        el:"#app",
        data:{
            tableData:[],
            form:{
                id:'',
                code:'',
                name:'',
                sex:'',
                age:'',
                price:'',
                type:'',
                attention:'',
                remark:''
            },
            form2:{
                id:'',
                code:'',
                name:'',
                sex:'',
                age:'',
                price:'',
                type:'',
                attention:'',
                remark:''
            },
            formLabelWidth:'120px',
            dialogFormVisible:false,
            dialogFormVisible2:false,
            name:'',
            pageNum:'',
            id:''
        },
        data(){

            return{
                tableData:[],
                form:{
                    id:'',
                    code:'',
                    name:'',
                    sex:'',
                    age:'',
                    price:'',
                    type:'',
                    attention:'',
                    remark:''
                },
                form2:{
                    id:'',
                    code:'',
                    name:'',
                    sex:'',
                    age:'',
                    price:'',
                    type:'',
                    attention:'',
                    remark:''
                },
                formLabelWidth:'120px',
                dialogFormVisible:false,
                dialogFormVisible2:false,
                name:'',
                pageNum:'',
                id:''
            }

        },methods:{
            success(name) {
                this.$message({
                    showClose: true,
                    message: name,
                    type: 'success'
                });
            },error(name){
                this.$message({
                    showClose: true,
                    message: name,
                    type: 'error'
                });
            },showCheckItem(name,pageNum){
                this.pageNum = pageNum;
                /**
                 * 显示检查项
                 */
                axios.get("/checkItem/queryAllCheckItem",{
                    params:{
                        'name':this.name,
                        'pageNum':pageNum
                    }
                }).then(data =>{
                  if (data.data.code=='-998'){
                      this.error("你无该权限")
                  }else if (data.data.code==null||data.data.code==''){
                      this.tableData=data.data;
                  }else {
                      this.error("显示失败!")
                  }
                }).catch(e =>{
                    alert("错误信息为:"+e)
                })
            },dialogFormVisibleOpen(row){
                this.form.id=row.id;
                this.form.code=row.code;
                this.form.name=row.name;
                this.form.sex=row.sex;
                this.form.age=row.age;
                this.form.price=row.price;
                this.form.type=row.type;
                this.form.attention=row.attention;
                this.form.remark=row.remark;
                this.dialogFormVisible=true;
            },updateCheckItem(form){
                axios.post("/checkItem/updateCheckItem",{
                    'id':form.id,
                    'code':form.code,
                    'name':form.name,
                    'sex':form.sex,
                    'age':form.age,
                    'price':form.price,
                    'type':form.type,
                    'attention':form.attention,
                    'remark':form.remark
                }).then(data =>{
                    if (data.data.code=='-998'){
                        this.error("你无该权限!");
                    }else if (data.data==true||data.data=='true'){
                        this.success("修改成功!");

                    }else{
                        this.error("修改失败!")
                    }
                    this.showCheckItem(this.name,this.pageNum);
                    this.dialogFormVisible=false;
                }).catch(e =>{
                    alert("错误信息为:"+e)
                });
            },deleteSetMeal(row){
                this.$confirm('此操作将永久删除该会员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/checkItem/deleteCheckItem", {
                        params: {
                            'id': row.id
                        }
                    }).then(data => {
                        if (data.data.code == '-998') {
                            this.$message({
                                showClose: true,
                                message: '你无该权限!',
                                type: 'error'
                            });
                        } else if (data.data == true || data.data == 'true') {
                            this.$message({
                                showClose: true,
                                message: '删除成功!',
                                type: 'success'
                            });
                        }else if (data.data=='-997'){
                            this.error("本项目已在检查组中,请先将检查项在检查组中移出来,在进行删除!");
                        } else {
                            this.$message({
                                showClose: true,
                                message: '删除失败!',
                                type: 'error'
                            });
                        }
                        this.showCheckItem(this.name, this.pageNum);
                    }).catch(e => {
                        alert("错误信息为:" + e)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },addCheckItem(form){
                axios.post("/checkItem/addCheckItem",{
                    'id':form.id,
                    'code':form.code,
                    'name':form.name,
                    'sex':form.sex,
                    'age':form.age,
                    'price':form.price,
                    'type':form.type,
                    'attention':form.attention,
                    'remark':form.remark
                }).then(data =>{
                    if (data.data.code==-'998'){
                        this.error("你无该权限!")
                    }else if(data.data==true||data.data=='true'){
                        this.success("添加成功!");
                    }else {
                        this.error("添加失败!")
                    }
                    this.showCheckItem(this.name,this.pageNum);
                    this.dialogFormVisible2=false;
                }).catch(e =>{
                    alert("错误信息为:"+e)
                    this.showCheckItem(this.name,this.pageNum)
                    this.dialogFormVisible2=false;

                });
            },count(code){
                axios.get("/checkItem/count",{
                    params:{
                        'code':code
                    }
                }).then(data =>{
                    if (data.data.code=='-998'){
                        this.error('你无该权限!');
                    }else if (data.data){

                    }else{
                        this.error("编码不能唯一!")
                    }
                })
            }
        },created(){
            this.showCheckItem();
        },//验证规则

    });
</script>
</html>